<!-- @format -->

<template>
  <div class="loading-content" v-if="visible">
    <!-- 自定义 logo -->
    <!-- <img v-if="logo" :src="logo" class="loading-logo" :alt="title" /> -->

    <!-- 加载动画 -->
    <div class="loading-spinner">
      <div class="spinner"></div>
    </div>

    <!-- 加载文字 -->
    <div class="loading-text">{{ title }}</div>
  </div>
</template>

<script setup lang="ts">
  interface Props {
    visible?: boolean;
    logo?: string;
    title?: string;
  }

  withDefaults(defineProps<Props>(), {
    visible: true,
    title: '正在加载...',
  });
</script>

<style scoped lang="scss">
  .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .loading-logo {
    width: 120px;
    height: auto;
    object-fit: contain;
  }

  .loading-spinner {
    position: relative;
    width: 40px;
    height: 40px;
  }

  .spinner {
    width: 100%;
    height: 100%;
    border: 3px solid #f3f3f3;
    border-top: 3px solid $main;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  .loading-text {
    color: #666;
    font-size: 16px;
    font-weight: 500;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
